<template>
  <div class="user-list-page">
    <div class="container-big">
      <div class="page-content">
        <div class="alibaba-design" />
        <div class="uncan-2019-text" />
        <div class="uncan-right" />
        <co-list margin>
          <co-list-item v-for="(item,index) in list" :key="index" @click="handleSelect(item)" link>
            <span>{{ item.uName }} | {{ item.company }}</span>
            <span class="edit cenCen" slot="right" @click.stop="update(item)">
              修改
            </span>
          </co-list-item>
        </co-list>
      </div>
    </div>
    <co-button to="/infoEntry" class="user-list-add-btn" block color="primary">
      新增用票人
    </co-button>
  </div>
</template>
<script>
import services from "../../api/profile";

export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.loadList();
  },
  methods: {
    async handleSelect(item) {
      const { action } = this.$route.query;

      if (action === "select") {
        let carTicketList = this.$store.state.buyTicket.carTicketList;
        let useTicketPopleId = this.$store.state.buyTicket.useTicketPopleId;
        let res = await this.checkuseTicketPopleId(item.id, useTicketPopleId);
        if (res) {
          this.$toast("当前购票信息已被添加");
          return;
        }
        for (let i = 0; i < carTicketList.length; i++) {
          for (let j = 0; j < carTicketList[i].useTicketPople.length; j++) {
            if (
              useTicketPopleId ==
              carTicketList[i].useTicketPople[j].useTicketPopleId
            ) {
              this.$set(carTicketList[i].useTicketPople[j], "userData", item);
            }
          }
        }
        this.$store.state.buyTicket.carTicketList = carTicketList;
        this.$router.go(-1);
        // TODO 设置选择人信息
        return;
      }

      this.update(item);
    },
    // 检验用票人的信息是否已经被重复添加
    checkuseTicketPopleId(id, useTicketPopleId) {
      return new Promise(resolve => {
        let ifAdd = false;
        let carTicketList = this.$store.state.buyTicket.carTicketList;
        for (let i = 0; i < carTicketList.length; i++) {
          for (let j = 0; j < carTicketList[i].useTicketPople.length; j++) {
            if (
              carTicketList[i].useTicketPople[j].userData &&
              carTicketList[i].useTicketPople[j].useTicketPopleId !=
                useTicketPopleId &&
              id == carTicketList[i].useTicketPople[j].userData.id
            ) {
              ifAdd = true;
            }
          }
        }
        resolve(ifAdd);
      });
    },
    update(item) {
      this.$router.push({
        path: "/infoEntry",
        query: {
          ...this.$route.query,
          id: item.id
        }
      });
    },
    loadList() {
      services.getUserList().then(data => {
        this.list = data;
        this.$store.state.buyTicket.userTicketList = this.list || [];
      });
    }
  }
};
</script>

<style lang="less">
.user-list-page {
  position: relative;
  height: 100%;
  padding-bottom: 110px;
  .page-content {
    position: relative;
    padding-top: 196px;
    padding-left: 30px;
    padding-right: 30px;
  }
}
.edit {
  z-index: 2;
  position: absolute;
  top: 0px;
  right: 60px;
  width: auto;
  padding: 0px 30px;
  height: 100%;
  cursor: pointer;
}
</style>
